
<template>
  <el-pagination style="margin: 10px auto" @size-change="handleSizeChange" @current-change="handlePageChange" background :current-page="data.page" :page-sizes="[10, 20, 30, 40]" :page-size="data.size" layout="total, sizes, prev, pager, next, jumper" :total="data.total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    data:{
      type: Object,
      default(){
        return {
          page: 1,
          size: 10,
          total: 0
        }
      }
    }
  },
  data() {
    return {
    }
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      this.data.size=val;
      this.$emit('onPagePaging')
    },
    handlePageChange(val) {
      this.data.page=val;
      this.$emit('onPagePaging')
    }
  }
}
</script>
